<div class="p-4">
    <h2 class="py-4">accordion 折叠菜单</h2>
    <div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            如果是汉字呢？
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            123
        </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            中华人民共和国
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            456
        </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            圭亖士
        </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            哈哈
        </div>
        </div>
    </div>
    </div>

    <h2 class="py-4">alert 警告提示</h2>
    <div class="alert alert-success d-flex align-items-center" role="alert">
        <i class="iconfont icon-sponsor fs-24 me-2"></i>
        <div>成功扣费 98 万元。</div>
    </div>

    <div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
        <i class="iconfont icon-shield fs-24 me-2"></i>
        <div>已成功格式化您的 C 盘。</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <h2 class="py-4">badge 徽标</h2>
    <button type="button" class="btn btn-primary rounded">
        通知 <span class="badge bg-white"><span class="rounded-pill text-dark">4</span></span>
    </button>

    <button type="button" class="btn btn-primary position-relative">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
        <span class="visually-hidden">unread messages</span>
    </span>
    </button>

    <button type="button" class="btn btn-primary position-relative">
    Profile
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
        <span class="visually-hidden">New alerts</span>
    </span>
    </button>

    <br>
    <span class="badge bg-primary">Primary</span>
    <span class="badge bg-secondary">Secondary</span>
    <span class="badge bg-success">Success</span>
    <span class="badge bg-danger">Danger</span>
    <span class="badge bg-light"><span class="text-dark">Light</span></span>
    <span class="badge bg-dark">Dark</span>

    <h2 class="py-4">button 按钮</h2>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-outline">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
</div>